<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        背景相关的属性
          background-color: 背景的颜色
          background-image:url(路径)  背景图
          background-repeat:背景图是否平铺（重复）   repeat 默认值 平铺; no-repeat 不平铺
                    repeat-x;平铺X轴 repeat-y 平铺Y轴
          background-position：水平方向 垂直方向  背景图的位置 
                    默认的背景图位置 在左left(0) 上top(0)
                水平方向 :left center right 数值 可以取负值
                垂直方向: top center bottom 数值 可以取负值
                当水平方向和垂直方向都是center时可以省略为一个
                水平方向取值为负往左 垂直方向取值为负往 上
                水平方向 取值为正往右，垂直方向取值为正 往下

        简写
            background:背景颜色 背景图() 平铺 位置;
      
        插入图和背景图有什么区别？
            1,插入图片是标签  背景图是css属性
            2，插入图片不写宽高是图片本身的宽高，而背景图如果不写高呢，高为0
            3，默认情况下插入图片上无法再次放内容，而背景图是可以再次放内容的(文字，图片，表单)

    -->
     <style>
         .box{
           width:600px; height:600px;
           border:solid 2px red; 
            background: url(images/pic.png) no-repeat 10px 30px;
            background-color: pink;
         }
         .box img{
             width:100px; height:100px;
         }
      
     </style>
</head>
<body>
    <div class="box">
        <p>这是杨洋</p>
        <img src="../day3/images/pic/caicai.png" alt="">
        <input type="text"/>
    </div>
    <input type="submit"  value="&nbsp;"  />
    <button><img src="" alt=""></button>
    <img src="images/pic.png" />
    <p>这是杨洋</p>
</body>
</html>